<template>
    <div>
        <h1>TodoList待办组件</h1>
        <TodoHeadVue @add-item="addItem"></TodoHeadVue>
        <TodoBarVue :tododata="todoData" :filterstate="filterstate" @changefilter="changeFilter"></TodoBarVue>
        <TodoBodyVue :tododata="filterList"></TodoBodyVue>
        {{hello}} <button @click="hello='world'">改hello</button>
    </div>
</template>

<script>
// 设计模式 发布订阅模式.
import TodoHeadVue from './TodoHead.vue';
import TodoBarVue from './TodoBar.vue';
import TodoBodyVue from './TodoBody.vue';
import {reactive,ref,computed,provide,toRefs} from 'vue'
export default {
    setup (props,context) {////////////这里没有this... 组合式API 不要写面向对象 直接写函数 变量 函数变量...
        // let hello="hello";//非响应式数据
        // let hello=ref("hello");// 响应式数据
        let id=ref(3);// refimpl对象 implement
        let todoData=reactive([
            {id:1,text:"学习vue2",done:false},
            {id:2,text:"学习router4",done:false}
        ]);
        let addItem=(text)=>{
            todoData.push({//reactive不需要解包
                id:id.value,
                text,
                done:false
            });
            id.value++; //ref需要解包.
        }
        let filterstate=ref("all");
        let changeFilter=(state)=>{
            filterstate.value=state;
        }
        let filterList=computed(()=>{//计算属性
            switch(filterstate.value){
                case 'com':
                    return todoData.filter(t=>t.done);
                case 'unc':
                    return todoData.filter(t=>!t.done);
                default:
                    return todoData;
            }
        });
        provide("changeDone",(id)=>{//Provide一个函数到后代组件.
            // console.log("chagneDone");
            todoData.map(t=>{//最好也修改原数组
                if(t.id==id){
                    t.done=!t.done;
                }
                return t;
            });
            console.log('修改done',todoData);
            let allrefs=reactive([
                {id:1,name:"老王"},{id:2,name:"老谢"}
            ]);
            console.log("转化之前==>",allrefs);
            console.log("转化之后===>",toRefs(allrefs))
        });
        provide("deleteItem",(id)=>{//删除
            // console.log('删除之前===>',todoData);
            // 操作错误.. filter 或 map返回一个新的数组  没有被Proxy代理. 不是响应式.
            //所以这时候 应该在原数组上面 修改
            // let afterDelete=todoData.filter(t=>t.id!=id); 
            // console.log('afterDelete===>',afterDelete);
            //正确做法 splice(i)
            // vue2 也是要注意的 因为是用Object.defineProperty() 浅层代理. 修改数组的时候 不能直接修改下标 也是要通过
            //包装后的数组函数 修改数据 才会有响应式.
            // let index=-1;
            //     todoData.find((t,i)=>t.id==id?index=i:'');//查找index
            //     todoData.splice(index,1);//正确用法. 修改原响应式数组.
            // console.log("删除 deleteItem",id,todoData);
            //清空数组??  todoData=[] 错误  todoData.length=0 正确
            // todoData=[]; //错误做法.
            // todoData.length=0; //正确做法
        });
        return {//返回的对象会自定混入 组件选项 可以在视图层调用
            todoData,
            addItem,
            filterstate,
            changeFilter,
            filterList,
            hello
        }
    },
    components:{
        TodoHeadVue,TodoBodyVue,TodoBarVue
    }
}
</script>

<style lang="scss" scoped>

</style>